<template>
    <div class="user-list-container custom-scrollbar">
        <h3>比赛记录</h3>
        <div class="filter flex">
            <el-select v-model="userListParams.state" placeholder="状态">
                <el-option label="全部" value=""/>
                <el-option label="未结束" value="0"/>
                <el-option label="已结束" value="1"/>
            </el-select>
            <el-button type="primary" @click="handleSearch()">搜索</el-button>
        </div>
        <el-table v-loading="commonData.loading" border ref="tableRef" row-key="date" :data="commonData.tableData"
                  style="width: 100%">
            <el-table-column prop="id" label="id"/>
            <el-table-column
                    label="状态"
            >
                <template #default="scope">
                    <el-tag v-if="scope.row.state==1" class="ml-2" type="danger">已结束</el-tag>
                    <el-tag v-else class="ml-2" type="success">未结束</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    label="结果"
            >
                <template #default="scope">
                    <template v-if="scope.row.state==1">
                        <el-tag v-if="scope.row.winnerId<=0" class="ml-2" type="info">平局</el-tag>
                        <el-tag v-else-if="scope.row.winnerId==user.id" class="ml-2" type="success">赢了</el-tag>
                        <el-tag v-else class="ml-2" type="danger">输了</el-tag>
                    </template>
                    <template v-else>
                        <el-tag class="ml-2" type="success">未结束</el-tag>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="createdAt" label="比赛时间"/>
            <el-table-column
                    label="操作"
            >
                <template #default="scope">
                    <el-button size="middle" v-if="scope.row.state==0" type="primary"
                               @click="handleChallenge(scope.row)">继续比赛
                    </el-button>
                    <el-button size="middle" v-if="scope.row.state==0" type="default"
                               @click="handleChallenge(scope.row)">认输
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination-box flex justify-content-flex-end">
            <el-pagination
                    :hide-on-single-page="true"
                    :current-page="userListParams.page"
                    :page-size="pagination.pageSize"
                    background
                    layout="prev, pager, next, jumper"
                    :total="pagination.total"
                    @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script setup>
    import {reactive, onMounted, computed} from 'vue';
    import {useStore} from 'vuex';
    import {useRouter} from 'vue-router';
    import {api} from '@/utils/config';
    import service from '@/utils/service';

    const store = useStore();
    const router = useRouter();
    const user = computed(() => store.getters.getUserInfo);
    const userListParams = reactive({
        page: 1,
        state: ''
    });
    const commonData = reactive({
        loading: true,
        tableData: []
    });
    const pagination = reactive({
        total: 0,
        pageSize: 10
    });
    onMounted(() => {
        getUserList();
    });
    //发起挑战
    const handleChallenge = async () => {
        await router.push('/index/chess');
    };
    //获取比赛列表
    const getUserList = () => {
        console.log(userListParams);
        commonData.loading = true;
        service.doGet(api['match'], userListParams)
            .then(async (response) => {
                if (response.code === 1) {
                    const data = response.data;
                    console.log(data);
                    commonData.tableData = data.list;
                    pagination.total = data.count;
                }
                commonData.loading = false;
            }).catch(() => {
            commonData.loading = false;
        })
    };
    //切换分页
    const handleCurrentChange = (data) => {
        userListParams.page = data;
        getUserList();
    };
    //搜索按钮
    const handleSearch = () => {
        userListParams.page = 1;
        getUserList();
    }
</script>

<style scoped lang="less">
    .user-list-container {
        height: 100%;
        background: #fff;
        padding: 15px;
        overflow: auto;
        box-sizing: border-box;

        .el-button + .el-button {
            margin-left: unset !important;
        }

        .filter {
            margin-bottom: 15px;

            input {
                max-width: 200px;
            }

            .el-select {
                max-width: 200px;
                margin-right: 15px;
            }
        }

        .pagination-box {
            margin-top: 20px;
            text-align: right;
        }
    }
</style>